.sw-condition {
    width: 100%;

    .sw-condition__container {
        display: grid;
        gap: var(--scale-size-4);
        width: 100%;
        align-items: start;
        grid-template-columns: var(--scale-size-256) 1fr auto;

        &.has--error {
            border: 1px solid var(--color-border-critical-default);
            padding: var(--scale-size-8);
            border-radius: var(--border-radius-card);
            background: var(--color-background-critical-default);

            .sw-condition__placeholder {
                background: var(--color-background-critical-default);
            }
        }
    }

    .sw-block-field {
        margin: var(--scale-size-12) 0 0;
        border: 1px solid var(--color-border-primary-default);
        border-radius: var(--border-radius-xs);
        background: var(--color-background-primary-default);
        overflow: hidden;

        &.sw-field {
            margin: 0;
        }

        &.sw-field--datepicker {
            display: grid;
            grid-template-columns: 1fr auto;

            .sw-field__hint {
                margin: 0;
                padding: 0 var(--scale-size-16);
                border-left: 1px solid var(--color-border-primary-default);
            }
        }

        .sw-block-field__block {
            height: 100%;
            align-items: flex-start;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }

        .sw-field__addition {
            height: 100%;
        }
    }

    .sw-condition__context-button {
        height: 100%;
        width: var(--scale-size-40);
        position: relative;
        border-radius: var(--border-radius-button);
        border: 1px solid var(--color-border-primary-default);
        background-color: var(--color-interaction-secondary-default);
        transition: background-color 0.15s;

        .sw-context-button__button {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: none;
        }
    }

    .sw-condition__context-button:hover {
        background: var(--color-interaction-secondary-hover);
    }

    .sw-tagged-field .sw-tagged-field__inner,
    .sw-single-select .sw-single-select__inner {
        border: none;
        border-radius: 0;
    }

    .sw-condition__condition-value {
        display: grid;
        gap: var(--scale-size-4);
        grid-template-columns: auto 1fr;
        width: 100%;
    }

    .sw-condition__value-content {
        display: flex;
        gap: var(--scale-size-4);
        height: 100%;

        .sw-field {
            min-width: var(--scale-size-96);
        }

        .mt-field {
            margin: 0;
        }

        & > div:last-of-type {
            width: 100%;
        }
    }
}
